// webpack 基础配置
const path = require('path');
// 生成HTML
const HtmlWebpackPlugin = require('html-webpack-plugin');
// CSS 提取到单独的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// CSS 文件压缩
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// JS 文件压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const webpack = require('webpack');

const isDev = process.env.NODE_ENV === 'development';

const resolve = (url) => {
    return path.resolve(__dirname, url);
};

console.log('isDev', isDev, process.env.NODE_ENV);

module.exports = {
    mode: isDev ? 'development' : 'production', // 可选择：development 或 production(webpack根据模式进行相应的优化)
    devServer: { // 开发服务器配置
        port: 3000,
        progress: true, // 将运行进度输出到控制台
        contentBase: resolve('./dist'), //
        compress: true, // gzip 压缩
        open: true
    },
    // 1) 源码映射,会单独生成一个sourcemap文件，js 出错了会标志当前报错的列和行
    // devtool:'source-map', // 增加映射文件，可以帮助我们调试代码
    // 2）不会产生单独的文件，但是可以显示行和列
    // devtool: "eval-source-map",
    // 3)不会产生列，但是是一个独立的映射文件
    // devtool: "cheap-module-source-map", // 产生后可保留起来（通过爆出的行和列在这个文件中找）
    // 4)不会产出文件，集成在打包后的文件中，不会生成列
    devtool: "cheap-module-eval-source-map",
    entry: resolve('./src/index.js'),
    output: {
        path: resolve('dist'),
        filename: '[name].js'
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除 node_modules 下的模块（一般这个下面的模块是经过处理了的，不需要在处理）
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: ['@babel/preset-env'],
                            plugins: [
                                ["@babel/plugin-proposal-decorators", {"legacy": true}],
                                ["@babel/plugin-proposal-class-properties", {"loose": true}],
                                "@babel/plugin-transform-runtime" // 代码运行时转换插件
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // 自动生成 html 并把 JS 插入到 html（可配置多个，生成多个html）
        new HtmlWebpackPlugin({
            template: resolve('./src/index.html'),
            title: "index.html",
            filename: "index.html", // 配置自定义模板（可在模板中通过 htmlWebpackPlugin.options.xxx 访问配置的属性）
            hash: true, // 强制在link script 路径后加 hash 防止缓存,
        })
    ]
};